<script setup lang="ts">
import { sleep } from '@/utils/sleep'
import { useSound } from '@vueuse/sound'
import stepImg011 from '@/assets/common/12/step_02_1.jpg'
import stepImg012 from '@/assets/common/12/step_02_2.jpg'
import stepImg013 from '@/assets/common/12/step_02_3.jpg'
import stepImg014 from '@/assets/common/12/step_02_4.jpg'
import correctAnswerSfx from '@/assets/sound/correct_answer.mp3'

const { play } = useSound(correctAnswerSfx)

const currentImg = ref(stepImg011)
const currentBarImg = ref(stepImg012)

const appStore = useAppStore()
const router = useRouter()

const intro = useIntro({
  steps: [
    {
      element: '#exit',
      intro: '请点击线性',
      position: 'top',
    },

  ],
}, [
  {
    target: 'exit',
    posotionCallback(info: DOMRect) {
      return { x: info.left + 40, y: info.top + 0 }
    },
  },

])
const isShow = ref(false)
const isUnmounted = ref(false); // 控制是否打断跳转
const set1 = setTimeout(async () => {
  intro.start()
}, 0);

onBeforeUnmount(() => {
  intro.stop()
  isUnmounted.value = true;
  console.log('Mask6_1 组件实例被卸载之前调用')
  clearTimeout(set1)
})
onUnmounted(() => {
  intro.stop()
  isUnmounted.value = true;
  console.log('Mask6_1 组件实例被卸载之前调用')
  clearTimeout(set1)
})

async function handleExit() {
  play()
  intro.stop() // 暂停指导
  currentImg.value = stepImg013
  currentBarImg.value = stepImg014
  // await sleep(1000)
  isShow.value = true;
  // await sleep(2000)
  // await sleep(500)
  setTimeout(() => {
    isShow.value = false;
    if (!isUnmounted.value) {
      router.push('Mask6_2')
    }
  }, 1000)
}


</script>

<template>
  <div class="flex-1 flex flex-col ">
    <div class="no-click ">
      <!-- <div v-if="isShow" style="position: relative;width: 100%;
      height: 100%;">
        <i class="text">已点击线性</i>
        <div class="box1"></div>
        <div class="xian1">
          <div class="jiantou"></div>
        </div>
        <div class="box1"></div>
      </div> -->
    </div>
    <div class="flex justify-between h-4em p-x-1em pt-1em ">
      <div>
        <i class="i-material-symbols-close mr-1em" />
        <i class="i-material-symbols-help-outline" />
      </div>

      <div>
        <n-button type="info" size="small" class="mr-1em">
          1080P<i class="i-material-symbols-arrow-drop-down-rounded" />
        </n-button>
        <n-button id="exportBtn" type="primary" size="small">
          导出
        </n-button>
      </div>
    </div>
    <div class="bg-#0A0A0A ">
      <img :src="currentImg" class="w-full" style="height: 90%;">
      <img :src="currentBarImg" style="position: absolute; bottom: 0;width: 100%;">
      <div id="exit" class=" exit" @click.stop="handleExit" />
    </div>
  </div>
</template>
<style scoped lang="scss">
@media screen and (min-width:440px) {
  .exit {
    position: absolute;
    width: 74px;
    height: 81px;
    top: 692px;
    left: 71px;
  }

  

}

@media screen and (max-width:440px) {
  .exit {
    position: absolute;
    width: 19vw;
    height: 21vw;
    bottom: 18vw;
    left: 18%;
  }

 
}

.no-click {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  z-index: 99;
}
</style>